@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$global-prefix: ngm;
$prefix: (ngm, story-viewer);

@function get-unthemable-tokens() {
  @return (
    container-rounded: var(--#{$global-prefix}-primary-container-rounded)
  );
}

@function get-color-tokens() {
  @return (
    color-surface: var(--#{$global-prefix}-color-surface),
    color-surface-container: var(--#{$global-prefix}-color-surface-container),
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

:host {
  @include token-utils.create-token-values($prefix, get-token-slots());
  @apply relative h-full flex-1 max-w-full flex;

  background-color: var(--ngm-color-surface-container);
  
  .pac-story-viewer__drawer {
    --mat-sidenav-container-background-color: transparent;
    --mat-sidenav-container-divider-color: transparent;
  }
  &.pac-story-viewer.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
}

@include token-utils.use-tokens($prefix, get-token-slots()) {
  .pac-story-bar {
    background-color: var(#{token-utils.get-token-variable(color-surface-container)});
  }
  .ngm-story {
    border-top-left-radius: var(#{token-utils.get-token-variable(container-rounded)});
  }
}

.ngm-story {
  width: 100%;
}

.pac-result {
  height: 100%;
}

.pac-story-bar__scale-item.active {
  .pac-story-bar__scale-point {
    @apply bg-yellow-500;
  }
}

.pac-story-bar {
  @apply px-0 w-0;
  max-width: 0;
  &.opened {
    @apply px-2 w-14;
    max-width: 3.5rem;
  }
}
